<template>
  <section class="water-card-detail-main base-main">
    <!--图片列表-->
    <div class="img-list bgcFFF">
      <div  v-if="list.length > 1" class="swiper-container pr swiper-container-initialized swiper-container-horizontal">
        <div class="swiper-wrapper">
          <div v-for="(item, index) in list" :key="index" class="swiper-slide">
            <img :src="item.pic" alt="">
          </div>
        </div>
      </div>
      <div class="one-img pr" v-if="list.length > 0 && list.length < 2">
        <img class="absolute-center" :src="list[0].pic" alt="">
      </div>
    </div>
    <!--图片列表-->

    <!--水店详情-->
    <div class="shop-detail bgcFFF mt10">
      <p class="title fs16 color333 line-bottom">水卡详情</p>
      <div class="shop-box">
        <img src="https://wenhui.whb.cn/u/cms/www/202007/28082915glng.jpg" alt="">
        <div class="msg color333 inline-block">
          <p class="fs16">花都区迎宾大道店</p>
          <p class="fs12"> <i class="fs13 iconfont icondizhibiaoshix"></i>花都区迎宾大道119号润龙大厦二楼</p>
          <p class="fs12"> <i class="fs13 iconfont icondizhibiaoshix"></i>020-86796968</p>
        </div>
      </div>
    </div>
    <!--水店详情-->

    <!--套餐详情-->
    <van-cell-group class="mt10">
      <van-cell title="水卡水总量" :value="waterPage.total + '桶'" value-class="color333"/>
      <van-cell title="已使用数量" :value="waterPage.total - waterPage.total +'桶'" is-link value-class="color333" @click="handleDetail"/>
      <van-cell title="剩余数量" value="4桶"  value-class="colorF54E4E"/>
    </van-cell-group>
    <!--套餐详情-->


    <div class="btn-box bgcFFF">
      <span class="base-btn">订水</span>
    </div>
  </section>
</template>

<script type="text/ecmascript-6">
  import Swiper from 'swiper'
  export default {
    data() {
      return {
        list:[
          {
            id:1,
            pic:'https://wenhui.whb.cn/u/cms/www/202007/28082915glng.jpg',
            waterPage: {
              total: 20, // 总桶数
              surplus: 15, // 剩余桶数
              indate: '2021-12-12', // 有效期时间
            },
          },
          {
            id:2,
            pic:'https://wenhui.whb.cn/u/cms/www/202007/280829264vrk.jpg',
            waterPage: {
              total: 22, // 总桶数
              surplus: 15, // 剩余桶数
              indate: '2021-12-12', // 有效期时间
            },
          },
          {
            id:3,
            pic:'https://wenhui.whb.cn/u/cms/www/202007/280829538m17.jpg',
            waterPage: {
              total: 30, // 总桶数
              surplus: 15, // 剩余桶数
              indate: '2021-12-12', // 有效期时间
            },
          },
//          {
//            id:4,
//            pic:'https://wenhui.whb.cn/u/cms/www/202007/28082915glng.jpg'
//          },
//          {
//            id:5,
//            pic:'https://wenhui.whb.cn/u/cms/www/202007/280829264vrk.jpg'
//          },
        ],
        url:'',
        cardId: '',//订水的水卡id
        waterPage: {
          total: '', // 总桶数
          surplus: '', // 剩余桶数
          indate: '', // 有效期时间
        }, //水卡套餐
      }
    },
    created(){
      this.initData()
    },
    methods: {
      initData(){

      },
      handleDetail () {
        console.log('handleDetail');
        this.$router.push({
          name: 'waterRecords'
        })
      },
    },
    mounted(){
      this.waterPage = this.list[0].waterPage
      this.cardId = this.list[0].id
      new Swiper ('.swiper-container', {
        spaceBetween: 0,//间隔
//        loop:true,//开启循环
        loopedSlides:1,//在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
        slidesPerView:'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
        effect:'coverflow',//可以实现3D效果的轮播,
        centeredSlides:true,//设定为true时，active slide会居中，而不是默认状态下的居左。
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        on: {
          slideChangeTransitionEnd: () => {
            //切换结束时，告诉我现在是第几个slide
            let swiper = this.$refs.mySwiper.swiper
            let activeIndex = swiper.activeIndex
            this.waterPage = this.list[activeIndex].waterPage
            this.cardId = this.list[activeIndex].id
          },
        }
      })
    },
  }
</script>

<style lang="scss">
  @import "../../assets/css/waterCardDetail.scss";
</style>
